<template>
  <view class="mine-container" :style="{ height: `${windowHeight}px` }">
    <image class="app-bg" src="/static/images/my-bg.png" />
    <view class="page-container">
      <uni-nav-bar :fixed="true" status-bar :border="false" title="我的" :background-color="backgroundColor"> </uni-nav-bar>
      <view class="page-content">
        <!--顶部个人信息栏-->
        <!-- <view class="header-section">
        <view class="flex padding justify-between">
          <view class="flex align-center">
            <view v-if="!name" class="login-tip" @click="getUserProfile">点击登录</view>
            <view v-if="name" class="user-info">
              <view class="u_title"> 用户名：{{ name }} </view>
            </view>
          </view>
        </view>
      </view> -->
        <view class="user-account flexBetween">
          <view class="user-info flexLeftCenter">
            <view class="user-info-img">
              <image class="user-img" src="/static/images/user.jpg" />
            </view>
            <!-- 未登录 -->
            <view>
              <view v-if="name" class="user-name">{{ name }}</view>
              <view v-else class="user-name" @click="getUserProfile"> 点击登录 </view>
              <view v-if="name" class="leave">会员等级：{{ userInfo.level.name }}</view>
            </view>
          </view>
          <view class="id" v-if="name" @click="copy">复制会员ID</view>
        </view>

        <view class="account-balance">
          <view class="left">
            <view class="top">
              <view class="vip"> 积分：{{ userInfo.point }}</view>
              <view class="icon flexCenter">
                <image class="img" src="/static/star.png" />
              </view>
            </view>
            <view class="dredge flexLeftCenter">
              <view class="btn flexCenter" @click="renew">
                赠送积分
                <!-- <uni-icons class="flexCenter uni-icons" type="right" size="15" color="#3892FF"></uni-icons> -->
              </view>
              <button open-type="contact" class="online-service">联系客服赠送积分</button>
            </view>
          </view>
          <view class="right">
            <view class="masonry flexCenter"><image class="img" src="/static/masonry.png" /></view>
          </view>
        </view>

        <view class="task">
          <view class="tab flexLeftCenter">
            <view class="tab-item" :class="activeIndex === 1 ? 'active' : ''" @click="tabChange(1)">进行中</view>
            <view class="tab-item" :class="activeIndex === 0 ? 'active' : ''" @click="tabChange(0)">已完成</view>
          </view>
          <view class="layout-scroll">
            <scroll-view
              class="scroll-view-container"
              :scroll-y="true"
              :scroll-with-animation="true"
              :refresher-threshold="50"
              refresher-background="transparent"
              :refresher-triggered="isRefresher"
              @refresherrefresh="onRefresh()"
              @refresherrestore="onRestore()"
              @scrolltolower="onScrollBottom()"
              :refresher-enabled="true"
            >
              <template v-if="list.length">
                <view class="list">
                  <view class="item" v-for="(item, index) in list" :key="index">
                    <view class="content flexLeftCenter">
                      <uni-tag :text="handleTag(item)" type="primary" />
                      <!-- <view>类型：{{ item.type == 1 ? '配音' : '文案' }}</view> -->
                      <view style="margin-left: 20rpx">提交时间：{{ moment(item.createTime).format('YYYY-MM-DD HH:mm') }}</view>
                    </view>
                    <view class="flexLeftCenter" v-if="item.status == 0">
                      <view class="fileUrl" @click="copyLInk(item, 1)" v-if="item.type == 1 || item.type == 2">复制链接</view>
                      <view class="fileUrl text" @click="copyLInk(item, 2)" v-if="item.type == 2">复制文本</view>
                    </view>
                  </view>
                </view>
              </template>
              <template v-else>
                <view class="empty-data">
                  <view class="no-data-img flexCenter">
                    <image class="img" src="/static/no-data.png" />
                  </view>
                  <view class="text"> 暂无数据 </view>
                </view>
              </template>
            </scroll-view></view
          >
        </view>
      </view>
    </view>

    <!-- <view class="content-section">
      <view class="mine-actions grid col-4 text-center">
        <view class="action-item" @click="handleJiaoLiuQun">
          <view class="iconfont icon-friendfill text-pink icon"></view>
          <text class="text">交流群</text>
        </view>
        <view class="action-item" @click="handleBuilding">
          <view class="iconfont icon-service text-blue icon"></view>
          <text class="text">在线客服</text>
        </view>
        <view class="action-item" @click="handleBuilding">
          <view class="iconfont icon-community text-mauve icon"></view>
          <text class="text">反馈社区</text>
        </view>
        <view class="action-item" @click="handleBuilding">
          <view class="iconfont icon-dianzan text-green icon"></view>
          <text class="text">点赞我们</text>
        </view>
      </view>

      <view class="menu-list">
        <view class="list-cell list-cell-arrow" @click="handleToEditInfo">
          <view class="menu-item-box">
            <view class="iconfont icon-user menu-icon"></view>
            <view>编辑资料</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleHelp">
          <view class="menu-item-box">
            <view class="iconfont icon-help menu-icon"></view>
            <view>常见问题</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleAbout">
          <view class="menu-item-box">
            <view class="iconfont icon-aixin menu-icon"></view>
            <view>关于我们</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleToSetting">
          <view class="menu-item-box">
            <view class="iconfont icon-setting menu-icon"></view>
            <view>应用设置</view>
          </view>
        </view>
      </view>

    </view> -->
  </view>
</template>

<script>
import storage from '@/utils/storage'
import { sociallogin, getUserInfo } from '@/api/login.js'
import { setToken } from '@/utils/auth'
import encryption from '@/common/encryption.js'
import { getMemberTask } from '@/api/common.js'
import moment from '@/utils/moment'
export default {
  data() {
    return {
      name: this.$store.state.user.name,
      backgroundColor: 'transparent',
      activeIndex: 1,
      isRefresher: false, //下拉刷新状态
      isScrollBottom: false, //滚动到了最底部
      isHasData: true, // 是否还有数据
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        status: 1
      },
      list: [],
      userInfo: {
        level: {
          level: 0,
          name: ''
        },
        point: 0,
        standing: ''
      }
    }
  },
  computed: {
    windowHeight() {
      return uni.getSystemInfoSync().windowHeight - 50
    }
  },
  onShow() {
    this.getUserInfo()
    this.getMemberTask()
  },
  methods: {
    moment,
    handleTag(item) {
      return item.type == 1 ? '配音' : '文案'
    },
    getMemberTask() {
      getMemberTask(this.queryParams).then((res) => {
        let apiData = res.data
        let list = apiData.list
        if (this.queryParams.pageNo === 1) {
          this.list = list
        } else {
          this.list = this.list.concat(list)
        }
        this.isRefresher = false
        this.isScrollBottom = false
        this.isHasData = apiData.total > this.list.length
      })
    },
    // 复制
    copy() {
      uni.setClipboardData({
        //复制文本
        data: this.userInfo.standing,
        success: function (res) {
          uni.showToast({
            title: '复制成功',
            icon: 'none',
            mask: 'true' //是否设置点击蒙版，防止点击穿透
          })
        }
      })
    },
    copyLInk(item, e) {
      let data = e == 1 ? item.resultDataVO.fileUrl : item.resultDataVO.text
      uni.setClipboardData({
        //复制文本
        data: data,
        success: function (res) {
          uni.showToast({
            title: '复制成功',
            icon: 'none',
            mask: 'true' //是否设置点击蒙版，防止点击穿透
          })
        }
      })
    },
    // 获取用户信息
    getUserInfo() {
      getUserInfo().then((res) => {
        this.userInfo = res.data
      })
    },
    tabChange(e) {
      this.activeIndex = e
      this.queryParams.status = e
      this.queryParams.pageNo = 1
      this.getMemberTask()
    },
    /**
     * scroll-view 涉及的方法
     **/
    // 下拉刷新被触发
    onRefresh() {
      if (!this.isRefresher) {
        this.isRefresher = true
      }
      // 请求数据
      this.queryParams.pageNo = 1
      this.getMemberTask()
    },
    // 下拉刷新被复位
    onRestore() {
      this.isRefresher = false
    },
    // 滚动到底部
    onScrollBottom() {
      if (this.isHasData) {
        this.isScrollBottom = true
        // 请求数据
        this.queryParams.pageNo += 1
        this.getMemberTask()
      }
    },
    getUserProfile() {
      uni.showLoading({ mask: true, title: '请稍后...' })
      uni.getUserProfile({
        desc: '用于完善会员资料',
        lang: 'zh_CN',
        success: (userRes) => {
          uni.login({
            provider: 'weixin',
            success: async (loginRes) => {
              console.log(loginRes.code)
              this.get_openID(loginRes.code)
            }
          })
        },
        fail: (err) => {
          console.log(err)

          uni.hideLoading()
          uni.showToast({
            icon: 'none',
            title: '授权失败'
          })
        }
      })
    },
    // 获取openid
    async get_openID(code) {
      sociallogin(code).then((response) => {
        setToken(response.data.accessToken)
        this.$store.dispatch('NewGetInfo').then((res) => {
          this.$tab.reLaunch('/pages/mine/index')
        })
      })
    },
    handleToInfo() {
      this.$tab.navigateTo('/pages/mine/info/index')
    }
    // handleToEditInfo() {
    //   this.$tab.navigateTo('/pages/mine/info/edit')
    // },
    // handleToSetting() {
    //   this.$tab.navigateTo('/pages/mine/setting/index')
    // },
    // getUserProfile() {
    //   this.$tab.reLaunch('/pages/login')
    // },
    // handleToAvatar() {
    //   this.$tab.navigateTo('/pages/mine/avatar/index')
    // },
    // handleLogout() {
    //   this.$modal.confirm('确定注销并退出系统吗？').then(() => {
    //     this.$store.dispatch('LogOut').then(() => {
    //       this.$tab.reLaunch('/pages/index')
    //     })
    //   })
    // },
    // handleHelp() {
    //   this.$tab.navigateTo('/pages/mine/help/index')
    // },
    // handleAbout() {
    //   this.$tab.navigateTo('/pages/mine/about/index')
    // },
    // handleJiaoLiuQun() {
    //   this.$modal.showToast('QQ群：①133713780、②146013835')
    // },
    // handleBuilding() {
    //   this.$modal.showToast('模块建设中~')
    // }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f6f7;
}

.mine-container {
  width: 100%;
  height: 100%;
  .app-bg {
    width: 750rpx;
    height: 834rpx;
  }
  .page-container {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
  }
  .page-content {
    flex: 1;
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    .user-account {
      .user-info {
        padding: 12rpx 0;
        flex: 1;

        .user-info-img {
          width: 136rpx;
          height: 136rpx;
          overflow: hidden;
          border-radius: 50%;
          margin-right: 22rpx;

          .user-img {
            width: 136rpx;
            height: 136rpx;
            ::v-deep image {
              border-radius: 50%;
            }
          }
        }

        .user-name {
          font-weight: bold;
          font-size: 36rpx;
          color: #101010;
          line-height: 36rpx;
          margin-bottom: 6rpx;
        }
        .leave {
          padding: 8rpx 20rpx;
          color: #3892ff;
          border: 1rpx solid #3892ff;
          border-radius: 40rpx;
          margin-top: 20rpx;
        }
      }
      .id {
        padding: 10rpx 20rpx;
        color: #fff;
        background: #9999;
        border-radius: 40rpx;
      }
    }
    .account-balance {
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      border-radius: 20rpx;
      margin-top: 40rpx;
      padding: 30rpx 40rpx 17rpx 47rpx;
      // background: url('https://zhengwei-wechat-static.oss-cn-hangzhou.aliyuncs.com/my/VIP-bg.png') no-repeat;
      background: url('/static/VIP-bg.png') no-repeat;
      background-size: 100% 100%;

      .left {
        .top {
          display: flex;
          .vip {
            font-weight: bold;
            font-size: 38rpx;
            color: #101010;
            margin-right: 9rpx;
          }
          .icon {
            width: 29rpx;
            height: 32rpx;
            .img {
              width: 29rpx;
              height: 32rpx;
            }
          }
        }
        .dredge {
          margin-top: 10rpx;
          position: relative;
          .time {
            font-size: 24rpx;
            color: #5c5c5c;
          }
          .btn {
            width: 150rpx;
            height: 50rpx;
            background: #f4f7fd;
            box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(42, 143, 253, 0.1);
            border-radius: 25rpx;
            font-size: 24rpx;
            color: #3892ff;
          }
          .online-service {
            width: 150rpx;
            height: 50rpx;
            position: absolute;
            width: 100%;
            padding: 0;
            left: 0;
            opacity: 0;
            z-index: 1;
          }
        }
      }

      .right {
        .masonry {
          .img {
            width: 164rpx;
            height: 132rpx;
          }
        }
      }
    }
    .task {
      background: #fff;
      border-radius: 20rpx;
      margin-top: 20rpx;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .tab {
      height: 80rpx;
      border-bottom: 1rpx solid #99999936;
      .tab-item {
        flex: 1;
        text-align: center;
        &.active {
          color: #3892ff;
          font-weight: bold;
        }
      }
      .tab-item:first-child {
        border-right: 1px solid #3892ff;
      }
    }
    .layout-scroll {
      flex: 1;
      height: 0;
      margin-top: 30rpx;
      .scroll-view-container {
        height: 100%;
        .list {
          .item {
            padding: 0 30rpx;
            background: #fff;
            // border-radius: 20rpx;
            padding-bottom: 20rpx;
            .content {
              // flex: 1;
              margin-bottom: 20rpx;
            }
            .fileUrl {
              width: 160rpx;
              height: 60rpx;
              line-height: 60rpx;
              text-align: center;
              background: radial-gradient(0% 70% at 50% 50%, #ff5b24 0%, #bc0a0d 100%);
              border-radius: 33rpx;
              font-size: 28rpx;
              color: #ffffff;
            }
            .text {
              color: #ca1a1d;
              background: #f9e8e8;
              margin-left: 20rpx;
            }
          }
          .item + .item {
            padding-top: 20rpx;
            border-top: 1rpx solid #99999940;
          }
        }
      }
    }
    .empty-data {
      padding-top: 167rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      .no-data-img {
        .img {
          width: 106rpx;
          height: 113rpx;
        }
      }
      .text {
        font-size: 28rpx;
        color: #101010;
        margin-top: 26rpx;
        margin-bottom: 56rpx;
      }
    }
  }

  // .header-section {
  //   padding: 15px 15px 45px 15px;
  //   background-color: #3c96f3;
  //   color: white;

  //   .login-tip {
  //     font-size: 18px;
  //     margin-left: 10px;
  //   }

  //   .cu-avatar {
  //     border: 2px solid #eaeaea;

  //     .icon {
  //       font-size: 40px;
  //     }
  //   }

  //   .user-info {
  //     margin-left: 15px;

  //     .u_title {
  //       font-size: 18px;
  //       line-height: 30px;
  //     }
  //   }
  // }

  .content-section {
    position: relative;
    top: -50px;

    .mine-actions {
      margin: 15px 15px;
      padding: 20px 0px;
      border-radius: 8px;
      background-color: white;

      .action-item {
        .icon {
          font-size: 28px;
        }

        .text {
          display: block;
          font-size: 13px;
          margin: 8px 0px;
        }
      }
    }
  }
}
</style>
